<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>数组的使用方法</title>
</head>
<body>
  <script type="text/javascript">
  // join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。
    const arr = [1,2,3]
    const arr1 = [1,2,3,4,5,6,7,8,9]

  console.log('<<<<<<<<<<<<<--------join-------->>>>>>>>>>>>>')  
  console.log(arr1.join())//1,2,3,4,5,6,7,8,9
  console.log(arr1.join('-'))//1-2-3-4-5-6-7-8-9

  console.log('<<<<<<<<<<<<<--------join-------->>>>>>>>>>>>>')  
  /* 方法衍生
    str  需要处理的对象,可以是字符串  数字 数组
  */
  function repeatString(str,n){
    return new Array(n+1).join(str)
  }
  console.log(repeatString(arr,2))//1,2,31,2,3
  console.log(repeatString('question',2))//question
  console.log(repeatString('123-',4))//123-123-123-123-

  console.log('<<<<<<<<<<<<<--------pop-------->>>>>>>>>>>>>') 
  //pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
  const arr2 = [1,5,7,9,22,33,44,]

  console.log(arr2.pop())//44
  console.log(arr2.pop())//33
  console.log(arr2.pop())//22
  console.log(arr2.pop())//9
  console.log(arr2.pop())//7

  console.log('<<<<<<<<<<<<<--------push-------->>>>>>>>>>>>>') 
  //push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的  长度。
  const arr3 = [23,24,25,26,27,28,29]


  console.log(arr3.push(1))//8
  console.log(arr3.push(1))//9
  console.log(arr3.push(1))//10
  console.log(arr3.push(1))//11


  console.log('<<<<<<<<<<<<<--------sort-------->>>>>>>>>>>>>') 
  //sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
  //在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串
  const arr5 = [3,6,1,2,0,9,5]
  console.log(arr5.sort())//[0, 1, 2, 3, 5, 6, 9]
  const arr6 = ['1','6','9','3','7']
  console.log(arr6.sort())// ["1", "3", "6", "7", "9"]

  console.log('<<<<<<<<<<<<<--------shift-------->>>>>>>>>>>>>') 
  //shift()将把arr的第—个元素移出数组，b并返回那个元素的值，并且将余下的所有元素前移一位，以填补数组头部的空缺;如果数组为空则返回undefined 。
  const arr7 = ['a','b','c']
  console.log(arr7.shift('d'))//a
  console.log(arr7.shift('d'))//b
  console.log(arr7.shift('d'))//c
  console.log(arr7.shift('d'))//undefined

  console.log('<<<<<<<<<<<<<--------unshift-------->>>>>>>>>>>>>') 
  //unshift向数组头部添加一个或多个元素 ，成功返回数组的新长度。
  const arr8 = ['a','b','c']
  console.log(arr8.unshift(1))//4
  console.log(arr8.unshift(1,2,3))//7
  
  console.log('<<<<<<<<<<<<<--------slice-------->>>>>>>>>>>>>') 
  //slice()截取数组长度。从下标start开始，到end（不包括该元素）下标结束，
  // 若没有写end结束下标，则截取到数组末尾。
  // 若end为负数，则从数组尾部开始截取，即-1指最后一个元素，-2指倒数第二个元素，以此类推 
  const arr9 = ['1','2','3']
  const arr10 = [1,2,3,4,5]
  const arr11 = [1,2,3,4,5,6,7]
  console.log(arr9.slice(1,2))//['2']
  console.log(arr10.slice(2,4))//[3,4]
  console.log(arr11.slice(2,-1))//[3,4,5,6]

  console.log('<<<<<<<<<<<<<--------toString-------->>>>>>>>>>>>>') 
  //toString()把数组转为用逗号连接的字符串表示。类似arr.join()效果一样
  const arr12 = [1,2,3,4,5]
  console.log(arr12.toString())//1,2,3,4,5
  console.log(arr12.toString())//1,2,3,4,5
  console.log(arr12.join())//1,2,3,4,5

  console.log('<<<<<<<<<<<<<--------splice-------->>>>>>>>>>>>>') 
  // arr.splice(start,deleteCount,value)
  // start: 开始插入活删除的数组元素的下标
  //deleteCount:从start开始,包含start在内的删除的元素个数,如果没有指定数值,name他讲删除从开始到结束的所有元素
  //value:需要插入的0-infinity 送start所指的下标出开始插入
  //返回值:如果从数组中删除了元素,返回的是很有被删除的元素的数组
  const arr13 = [1,2,3,4,5]
  console.log(arr13.splice(2))//[3,4,5]
  console.log(arr13.splice())//[]
  console.log(arr13.splice(2,2))//[]
  const arr14 = [1,2,3,4,5]
  console.log(arr14.splice(2,2,'new'))//[3]
  console.log(arr14)//[1,"new",4,5]

  console.log('<<<<<<<<<<<<<--------reverse-------->>>>>>>>>>>>>') 
  //点草数组元素的顺序,并返回新的数组
  const arr15 = [1,2,3,4,5]
  console.log(arr15.reverse())// [5, 4, 3, 2, 1]

  console.log('<<<<<<<<<<<<<--------concat-------->>>>>>>>>>>>>') 
  //连接多个数组,并返回新的数组
  const arr16 = [2,3,4,5,6]
  const arr17 = [11,21,31]
  console.log(arr16.concat(arr17))//[2, 3, 4, 5, 6, 11, 21, 31]
  console.log(arr17.concat(arr16))//[11, 21, 31, 2, 3, 4, 5, 6]
  
  console.log('<<<<<<<<<<<<<--------foreach-------->>>>>>>>>>>>>') 
  //便利数组元素
  const arr18 = ['a','b','c']
  arr18.forEach(function (i,key) {
    console.log(i,key)//a 0  b 1  //c 2
    console.log(key,i)//0 "a" 1 "b" 2 "c"
  })

  console.log('<<<<<<<<<<<<<--------filter-------->>>>>>>>>>>>>') 
  //过滤数组中的某些元素,在回调函数中设置条件,不满足的都会过滤掉,返回一个新数组
  const arr19 = [15,18,23,28,33]
  const newArr = arr19.filter(function(i){
    return i > 23
  })
  console.log(newArr)//[28,33]

  console.log('<<<<<<<<<<<<<--------map-------->>>>>>>>>>>>>') 
  //遍历数组,数组里面的元素经过指定加工处理,返回一个新数组
  const arr20 = [15,18,23,28,33]
  const newArr1 = arr20.map(function(i){
    return i+10
  })
  console.log(newArr1)//[25, 28, 33, 38, 43]

  console.log('<<<<<<<<<<<<<--------reduce-------->>>>>>>>>>>>>') 
  //reduce方法有两个参数，第一个参数是一个callback，用于针对数组项的操作；第二个参数则是传入的初始值，这个初始值用于单个数组项的操作。需要注意的是，reduce方法返回值并不是数组，而是返回经过叠加处理后的结果。
  const arr21 = [1,5,7]
  const callback = function (i,j){
    return i + j
  }
  const newArr3 = arr21.reduce(callback,0)
  console.log(newArr3)//13
  const newArr4 = arr21.reduce(callback,10)
  console.log(newArr4)//23

  console.log('<<<<<<<<<<<<<--------indexOf-------->>>>>>>>>>>>>') 
  //用indexOf来判断,存在返回元素下标  不存在返回-1
  function inArr(value,arr){
    return arr.indexOf(value)!==-1 ? true:false
  }
  const arr22 = [1,2,3]
  console.log(inArr(2,arr))//true
  console.log(inArr(5,arr))//false

  console.log('<<<<<<<<<<<<<--------后续搜集继续更新-------->>>>>>>>>>>>>') 



  </script>
</body>
</html>